
<template>
	<el-dialog title="配件" visible :show-close="false" :modal-append-to-body="false" class="wrap" size="tiny">
		<i class="el-icon-close close" @click="cancel"></i>
		<el-table
				:data="dataList"
				border
				align="left"
				class="admin-table"
				@select="checkSelect"
				 style="width: 100%"
				@select-all="checkall">
				<div slot='empty'>
						<img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
						<span style="vertical-align: middle;">暂时还没有内容哦!</span>
				</div>
				<el-table-column
						:prop="v.prop"
						:label="v.label"
						v-for="(v,index) in portTitleList"
						align="center"
						show-overflow-tooltip
						v-if="v.hide != 0"
						:formatter="v.formatter"
						:align="v.align || 'center'"
						:fixed="v.fixed"
						:class-name="v.columnStyle"
						:width="v.width"
						:min-width="v.minWidth"
						:header-align="v.headerAlign || 'center'"
						>
						<template scope="scope">
								<div slot="reference" :style="tableCellControl(scope)">
										{{ scope.row[scope.column.property] }}
								</div>
						 </template>
				</el-table-column>
				<el-table-column
				 align="center"
				 label="操作"
				 width="">
				 <template scope="scope">
						 <el-button size="small" type="text" @click="componentsShow('singleDelete',scope)">删除</el-button>
				 </template>
			 </el-table-column>
			</el-table>
		<el-button type="info" class="submit" @click="cancel">确定</el-button>
		<!-- 单独删除组件 -->
		<DeleteComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide"  :data="portComponents.singleDelete.data"></DeleteComponent>
	</el-dialog>

</template>

<script type="text/javascript">
	import qs from 'qs'
	import DeleteComponent from './delpj'
	export default {
		props: ['params'],
		components: { DeleteComponent },
		data() {
			return {
				form: {
					id: '',
				},
					multipleDelNum:'', //获取批量选择的数据
				  dataList: [],  //表格数据
					portComponents: {
							/* 单行删除  */
							singleDelete: {
									type: 'singleDelete',
									toggle: false,
									params: '',
									data: {
											index: '',
											type: 'single',
											title: '此操作将删除该记录?, 是否继续?'
									}
							},
						},
					portTitleList: [
							{
									prop:'mc',
									label:'物品名称',
									hide:1,
									align:'center',
									fixed:false,
									width:'',
									minWidth:'',
									headerAlign:'center',
									formatter: function(row,column) {}
							},
							{
									prop:'jg',
									label:'物品价格',
									hide:1,
									align:'center',
									fixed:false,
									width:'',
									minWidth:'',
									headerAlign:'center',
									formatter: function(row,column) {}
							},
					]
			}
		},
		created() {
           this.form.id=this.params.row.id;
			this.loadinfo();
		},
		methods: {
			loadinfo(){
				 var logininfo = JSON.parse(localStorage.logininfo) ;
				 this.axios.get(this.$store.state.api+'wpfx/getpj',{
						 params:{
							 xxid:logininfo.xxid,
							 id:this.form.id
						 }
					}).then( res =>  {
						console.log(res)
						console.log(123)
						this.dataList = res.data.data
					 }).catch(res => {
						 this.$message.warning("服务器异常");
			 				this.$emit('close', { type: 'pjxq', cancel: true });
					 })
			},
			cancel() {

					 this.$emit('close', { type: 'pjxq', cancel: true })

			},
			tableCellControl (scope) {
				//表格单元格控制CSS样式
						/*if (scope.row.id == 112 && scope.column.property == "iname") {
								return {
										color:"red",
								}
						}else{
								return {
										color:"green",
								}
						}*/
			 },
			checkSelect (selection, row) {//点击单选select触发事件
					console.log(selection, row)
					let strID = [];
					selection.forEach(function(v,i){
							strID.push(v.id)
					})
					this.multipleDelNum = strID.join(",");
			},
			checkall (selection) {//点击全选select触发事件
					let strID = [];
					selection.forEach(function(v,i){
							strID.push(v.id)
					})
					this.multipleDelNum = strID.join(",");
			},
			componentsShow (type,data) { //显示组件
					console.log(type,data)
					for ( let i in this.portComponents ) {
							if (type == this.portComponents[i].type) {
									this.portComponents[i].toggle = true;
									this.portComponents[i].params = data;
									if (this.portComponents[i].data.type == 'single') {
											this.portComponents[i].data.index = data.row.id
									}else if(this.portComponents[i].data.type == 'multiple'){
											this.portComponents[i].data.index = this.multipleDelNum;
									}else{
											return;
									}
									return;
							}
					}
			},
			componentsHide (setting) { //关闭组件
					console.log(setting)
					for ( let i in this.portComponents ) {
							if (setting.type == this.portComponents[i].type) {
									this.portComponents[i].toggle = false;
									if (!setting.cancel) {
										 this.loadinfo();
									}
									return;
							}
					}
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
	.form {
		text-align: left;
	}
	 .input {
            width: 300px;
            display: inline-block;
        }

	.select-block {
		display: block;
	}

	.submit {
		margin-top: 20px;
		width: 120px;
	}
</style>
